/*
 * Copyright (c) 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

:host {
    display: block;
    -webkit-text-size-adjust: none;
}

.header,
.header .line-number,
.header .line-number a {
    color: #849;
    background-color: #fef;
}

.line-number::before {
    content: attr(value);
}

.remove .text {
    background-color: #fee;
}

.add .text {
    background-color: #efe;
}

.remove .text del,
.remove .whole-line {
    text-decoration: none;
    background-color: #ffd4d4;
    display: inline-block;
}

.add .text ins,
.add .whole-line {
    text-decoration: none;
    background-color: #d4ffd4;
    display: inline-block;
}

.row,
.pair {
    display: -webkit-flex;
    display: flex;
}

.text {
    flex: 1;
    -webkit-flex: 1;
    border-left: 1px solid #dcdcdc;
}

.text,
.show-context {
    padding: 0 16px;
}

.show-context {
    align-self: center;
    -webkit-align-self: center;
}

.line-number,
.text {
    white-space: pre-wrap;
    word-wrap: break-word;
    /* For non-WebKit browsers */
    word-break: break-all;
    /* For WebKit/Blink browsers. Non-standard but more beautiful. */
    word-break: break-word;
    font-family: Menlo, Monaco, monospace;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    box-shadow: inherit;
}

.line-number {
    min-width: 3em;
    text-align: right;
    color: #444;
    padding-right: 16px;
    cursor: default;
}

.add .line-number:hover,
.remove .line-number:hover,
.both .line-number:hover {
    text-decoration: underline;
    color: #1155CC;
    background-color: #F1F4F8;
    cursor: pointer;
}

cr-diff-image {
    margin-left: 108px;
}

cr-diff-messages {
    border-color: #dcdcdc;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    margin-left: calc(6em + 32px);
}

.spinner {
    margin: 0.5em auto;
    display: block;
}

.side-by-side {
    display: block;
}

.side-by-side .left,
.side-by-side .right {
    width: 50%;
    min-width: 340px;
}

.side-by-side cr-diff-messages {
    margin-left: calc(3em + 16px);
}

.side-by-side .left {
    border-right: 1px solid #dcdcdc;
}

.side-by-side cr-diff-messages {
    border-width: 1px 0 1px 1px;
}

.side-by-side .text {
    border: none;
}

.cursor-target {
    box-shadow: 0 -2px #00d;
}

.cursor-target div.line-number {
    background-color: rgba(0, 0, 200, .1);
}

.cursor-focus:focus {
    outline: none;
}

@media (max-width: 600px) {
    cr-diff-image {
        margin: 0;
    }

    cr-diff-messages {
        margin-left: calc(6em + 8px);
    }

    .side-by-side cr-diff-messages {
        margin-left: calc(3em + 4px);
    }

    .text,
    .show-context {
        padding: 0 4px;
    }

    .line-number {
        padding-right: 4px;
    }
}
